<template>
  <div class="main">
    <div class="sub">
      <a-input
        v-model:value="name"
        placeholder="新建标签"
        class="input"
      ></a-input>
      <a-button type="primary" @click="btnFn" class="btn">保存</a-button>
    </div>
    <div class="show">
      <div v-for="(item, index) in arr" :key="index">
        <a-tag closable @close="log" class="tag" color="#87d068">
          {{ item }}</a-tag
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getTagBytag, showTagApi } from "../utils/api.js";

const name = ref("");

// 定义一个保存数组
const arr = ref([]);

// 调用showTagApi()接口,将数据保存到arr中
function showTagFn() {
  showTagApi().then((res) => {
    // console.log(res);
    res.forEach((item) => {
      arr.value.push(item.name);
    });
  });
}

showTagFn();


// 点击保存
const btnFn = () => {
  // 判断是否为空
  if (name.value.trim() === "") {
    alert("请输入内容");
    return;
  }
  // 判断是否重复
  if (arr.value.includes(name.value)) {
    alert("已存在");
    return;
  }

  // 保存，并调用接口
  function getTagFn() {
    arr.value.push(name.value);
    getTagBytag({
      tag: name.value,
    }).then((res) => {
      // console.log(res);
    });
  }

  getTagFn();

  // 清空
  name.value = "";
};
</script>
<style lang="less" scoped>
.sub {
  display: flex;
  flex-direction: column;

  .input {
    width: 600px;
  }
  .btn {
    width: 100px;
    margin-top: 10px;
  }
}
.show {
  display: flex;
  flex-wrap: wrap;
  .tag {
    margin: 30px;
  }
}
</style>
